<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      background: url("") center center;
      background-repeat: no-repeat;
      background-size: cover;
      object-fit: fill;
    }
  </style>
</head>

<body>
  <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->

  <div id="bg"
    style="width:100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
    <div id="player"></div>
  </div>

  <script>

    init()

    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    var videoId = getVideoId()
    var videoHeight = 640
    var videoWidht = 360
    var width = document.getElementById("bg").offsetWidth;
    var height = width / (videoHeight / videoWidht);

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        width: '100%',
        height: height,
        videoWidth: videoWidht,
        videoHeight: videoHeight,
        videoId: 'CKjSm5ZeehE',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange,
          'onError': onError
        },
        playerVars: {
          'controls': 0,
          'playsinline': 1,
          'autoplay': 1
        }
      });

      // setInterval(playVideo, 3000);
    }

    // 是否自动播放
    var isPlay = false
    // 是否手动点击
    var isClickPlay = true

    function onError(event) {
      console.log("播放失败" + event)
      try{
        window.YouTuBeInterface.onError(event.toString())
      }catch(e){}
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.playVideo();
      onStartPlaying()
    }

    function onStartPlaying() {
      try {
        // var videoDiv = document.getElementsByTagName('iframe')[0]
        // var videoWidht = videoDiv.style.width
        // var videoHeight = videoDiv.style.height
        window.YouTuBeInterface.onStartPlaying(videoWidht, videoHeight);
      } catch (err) { }
    }

    function setVolume(num){
      try{
        player.setVolume(parseInt(num))
      }catch(e){

      }
    }

    function stopVideo(){
      try{
        player.stopVideo();
        isClickPlay = false
      }catch (err) {}
    }

    function playVideo() {
      player.playVideo();
      isClickPlay = true
    }

    function autoPlayVideo() {
      if (!isPlay) {
        if(isClickPlay){
          player.playVideo();
        }
        
      }

    }

    function setIntervalPlayVideo() {
      setInterval(autoPlayVideo, 3000);
    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.

    function onPlayerStateChange(event) {
      console.log("event.data " + event.data)
      if (event.data == 1) {
        isPlay = true
        console.log("ssss")
      } else {
        isPlay = false
      }
    }



    //业务相关方法
    function queryString(param) {
      var sValue = location.search.match(new RegExp("[\?\&]" + param + "=([^\&]*)(\&?)", "i"))
      return sValue ? sValue[1] : sValue
    }
    //获取youtube的videoId
    function getVideoId() {
      return "676LQVoqZ7Q"
      var videoUrl = queryString("url");
      var sValue = videoUrl.match(new RegExp("[\?\&]v=([^\&]*)(\&?)", "i"))
      return sValue ? sValue[1] : sValue
    }

    function init() {
      //https://www.youtube.com/watch?v=_QbRXRnHMVY&ab_channel=%E4%B8%AD%E5%A4%A9%E9%9B%BB%E8%A6%96
      //document.getElementsByTagName('body')[0].style.backgroundImage='url(https://tripbay.oss-accelerate.aliyuncs.com/tem/1.jpg)'
      console.log("===========init===========");
      //背景图片
      var bHref = "url(" + queryString("burl") + ")";
      if (bHref) {
        document.getElementsByTagName('body')[0].style.backgroundImage = bHref;
      }
      console.log(bHref);
      console.log("===========init===========");
    }


  </script>
</body>

</html>